<template>
  <div>
    <el-form :model="info" label-position="top" ref="claimForm" :rules="claimRule">
      <el-form-item label="用户ID" prop="uuid">
        <span>
          {{ info.uid }}
        </span>
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickname">
        <span>
          {{ info.nickname }}
        </span>
      </el-form-item>
      <el-form-item label="身份认证" prop="identification">
        <span>
          {{ $selectFormat['filmIdenSl'](info.identification).label }}
        </span>
      </el-form-item>
      <el-form-item label="真实姓名" prop="username">
        <span>
          {{ info.username }}
        </span>
      </el-form-item>
      <el-form-item label="认领作品" prop="filmTitle">
        <span>
          {{ info.filmTitle }}
        </span>
      </el-form-item>
      <el-form-item label="认领职务" prop="job">
        <span>
          {{ info.job }}
        </span>
      </el-form-item>

      <el-form-item label="作品封面" prop="cover">
        <img
          v-if="info.cover"
          :src="`${info.cover}?x-oss-process=image/resize,m_fill,h_300,w_240`"
        />
        <upload-resource is-public @upload="setCoverFile" folder="asset" v-else></upload-resource>
      </el-form-item>
      <el-form-item label="上映时间" prop="">
        <el-date-picker
          v-model="info.onlineDay"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="影视类型" prop="category">
        <el-select v-model="info.category" placeholder="请选择" :disabled="info.filmId">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证明资料" prop="resource">
        <div class="imgBox">
          <div class="picture" v-for="(index, key) in info.attachments" :key="key">
            <img :src="index" :preview="index" />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="票房" prop="boxOffice">
        <el-input v-model="info.boxOffice"></el-input>
      </el-form-item>
      <el-form-item label="运营审核通过凭证截图（如片尾字幕等，最多10张）" prop="resource">
        <upload-resource
          is-public
          @upload="setCertificatesFile"
          v-if="info.certificates && info.certificates.length < 11"
          folder="asset"
        ></upload-resource>
        <div class="imgBox">
          <div class="picture" v-for="(item, index) in info.certificates" :key="item">
            <img :src="item" :preview="item" />
            <el-button type="text" @click="delCertImg(index)">删除</el-button>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="审核设置">
        <el-radio-group class="set" v-model="info.checked">
          <el-radio :label="1">审核通过</el-radio>
          <el-radio :label="2">
            审核不通过
            <el-input
              v-model="info.reason"
              v-if="(showReason = true)"
              placeholder="填写审核不通过原因"
            ></el-input>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <edit-bar>
        <el-button type="primary" @click="save" :disabled="currentStatus == 1">保存</el-button>
        <el-button @click="$tabs.close()">取消</el-button>
      </edit-bar>
    </el-form>
  </div>
</template>
<script>
  import EditBar from 'comp/EditBar';
  import UploadResource from 'comp/UploadResource';
  import { FormRuleConf } from '@/config';

  export default {
    data() {
      return {
        ...FormRuleConf.Claim,
        info: {},
        options: [
          { value: '电影', label: '电影' },
          { value: '剧集', label: '剧集' },
          { value: '综艺', label: '综艺' },
          { value: '短片', label: '短片' },
        ],
        currentStatus: 0, //当前审核状态
      };
    },
    components: {
      EditBar,
      UploadResource,
    },
    mounted() {
      this.getInfo();
    },
    methods: {
      setCoverFile(data) {
        this.$set(this.info, 'cover', data.url);
      },
      setCertificatesFile(data) {
        this.info.certificates.push(data.url);
      },
      delCertImg(index) {
        this.info.certificates.splice(index, 1);
      },
      getInfo() {
        this.$service.FilmApplyInfo({ applyId: this.$route.params.id }).then((res) => {
          this.info = {
            ...res,
            certificates: res.certificates.split(',') || [],
          };
          this.currentStatus = this.info.checked;
          this.$previewRefresh();
        });
      },
      coverSave() {
        this.$service
          .FilmApplyUpdateFilm({
            applyId: this.$route.params.id,
            cover: this.info.cover,
            title: this.info.filmTitle,
            onlineDay: this.info.onlineDay,
            category: this.info.category,
            id: this.info.filmId,
            attachments: this.info.certificates.join(','), // 提交和回显的字段不一样
            boxOffice: this.info.boxOffice,
          })
          .then((res) => {
            this.pass();
          })
          .catch((res) => {
            this.$message.error(res.message);
          });
      },
      save() {
        if (this.info.checked == 1) {
          if (this.info.cover) {
            this.coverSave();
          } else {
            this.$message.error('请上传作品封面图！');
          }
        }
        if (this.info.checked == 2) {
          if (this.info.reason) {
            this.noPass();
          } else {
            this.$message.warning('请输入审核不通过原因');
          }
        }
      },
      pass() {
        this.$service
          .FilmApplyPass({ id: this.$route.params.id })
          .then((res) => {
            this.$message.success('审核通过');
            this.getInfo();
          })
          .catch((res) => {
            this.$message.error(res.message);
          });
      },
      noPass() {
        this.$service
          .FilmApplyRefuse({
            id: this.$route.params.id,
            reason: this.info.reason,
          })
          .then((res) => {
            this.$message.success('操作成功');
            this.getInfo();
          });
      },
    },
  };
</script>
<style lang="less" scoped>
  /deep/ .el-form-item__label {
    font-size: 16px;
    padding: 10px 5px !important;
    margin-bottom: 10px;
    border-radius: 3px 3px 0 0;
    background: #ced6e2;
    color: #222;
    width: 100%;
    line-height: 24px;
  }
  .imgBox {
    display: flex;
    flex-wrap: wrap;
  }
  .picture {
    margin-right: 15px;
    margin-bottom: 10px;
    height: 150px;
    img {
      max-width: 100%;
      max-height: 100%;
    }
    .el-button {
      display: block;
    }
  }
  .edit-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    left: 210px;
    background: white;
    padding: 20px;
    border-top: 1px solid #ccc;
    z-index: 11;

    /deep/ .el-button {
      margin-left: 10px;
    }
  }
  .set {
    margin-bottom: 50px;
  }
</style>
